<template>
	<el-dialog v-model="props.isShow" width="26%" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-18px font-bold">
				绑定手机验证
			</div>
		</template>
		<div class="mb-20px">
			<div>
				<p class="text-#86909C">手机号</p>
				<div class="mt-10px flex justify-between items-center">
					<div class="w-18%">
						<el-select placeholder="+86">
							<el-option label="+86" value="+86" />
							<el-option label="+86" value="+86" />
							<el-option label="+86" value="+86" />
							<el-option label="+86" value="+86" />
						</el-select>
					</div>
					<div class="w-80%">
						<el-input placeholder="请输入手机号码" type="password" show-password v-model="phoneInput" />
					</div>
				</div>
			</div>
			<div class="mt-20px">
				<p class="text-#86909C">验证码</p>
				<div class="mt-10px flex justify-between items-center relative">
					<div class="w-100%">
						<el-input placeholder="请输入手机号码" type="password" />
					</div>
					<div class="h-50px absolute flex items-center justify-center right-10px
					text-18px text-#C9CDD4">
						<p :class="{ 'text-#000000': phoneInput != '' }">发送验证码</p>
					</div>
				</div>
			</div>
			<div class="mt-60px">
				<el-button color="#114CEE" style="font-size:18px;width:100%;height:50px;" @click="confirm()"> 确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'

interface IProps {
	isShow: boolean
}
const props = defineProps<IProps>();

const emits = defineEmits(['close', 'confirm'])

const phoneInput = ref<string>('');
const close = () => {
	emits('close', false)
}

const confirm = () => {
	emits('confirm')
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item--label-top .el-form-item__label:before {
	display: none;
}

::v-deep .el-input__wrapper {
	height: 50px;
}

::v-deep .el-input__inner {
	font-size: 18px;
}

::v-deep .el-select__wrapper {
	height: 50px;
}

::v-deep .el-select__placeholder.is-transparent {
	font-size: 18px;
}
</style>
